<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :data-id="id">
      <div class="grid-content ">
        <el-image
            style="width: 100px; height: 100px;padding-top: 5px"
            :src="info.bookCover"
            fit="contain"
        ></el-image>
        <div class="b_title">
          <div style="font-size: 18px;font-weight: 500;padding-bottom: 2px;display: flex;align-items: center">
            <div>
              {{ info.bookName }}
            </div>
            <div style="padding-left: 10px;font-size: 14px;">
              {{ info.bookAuthor }}
            </div>
          </div>
          <div style="font-size: 15px;padding-bottom: 5px">

          </div>
          <div style="display: flex;flex-direction: row">
            <div>
              <el-tag>人气{{ info.popu }}</el-tag>
            </div>
            <div style="padding-left: 15px">
              <el-tag class="ml-2" type="success">
                {{ info.bookStatus === '0' ? '连载' : '完本' }}
              </el-tag>
            </div>
            <div v-show="!addShelf" @click.stop="toAddShelf" style="padding-left: 10px">
              <el-tag class="ml-2" type="info">加入书架</el-tag>
            </div>
          </div>
          <div v-if="last.id!=undefined" style="padding: 5px 0;line-height: 2px">
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item>最新章节</el-breadcrumb-item>
              <el-breadcrumb-item>
                <el-link type="primary" @click="toContent(last.id,last.catalogName)"> {{ last.catalogName }}</el-link>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="b_desc">
            <el-divider></el-divider>
            {{ info.bookIntroduction }}
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>章节列表</span>
      </div>
    </template>
    <div class="list">
      <el-row :gutter="10">
        <el-col v-for="item in catalogs" :key="item.id"
                :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
        >
          <div @click="toContent(item.id,item.catalogName)">
            <el-link type="primary">
              {{ item.catalogName }}
            </el-link>
          </div>
          <el-divider></el-divider>
        </el-col>
      </el-row>
    </div>
    <div v-show="catalogs.length>0 && !isLast" style="padding:20px;text-align: center">
      <el-alert title="加载更多" type="success" center :closable="false" @click="loadMore"></el-alert>
    </div>
  </el-card>
</template>

<script>
import {get, post} from '../../request/request'
import {book, catalogs, addShelf} from '../../request/api'
import {ArrowRight} from '@element-plus/icons-vue'
import {ElLoading, ElMessage} from "element-plus";

export default {
  name: "Detail",
  data() {
    return {
      id: '',
      info: {},
      catalogs: [],
      last: {},
      ArrowRight: ArrowRight,
      addShelf: false,
      pageNum: 1,
      pageSize: 100,
      first: true,
      isLast: false
    }
  },
  created() {
    const id = this.$route.params.id
    this.id = id
    this.getInfo(id)
    this.getCatalog(id)
  },
  methods: {
    getInfo(id) {
      const loading = ElLoading.service({fullscreen: true})
      get(book + id).then(res => {
        this.info = res.data
        this.addShelf = res.data.addShelf
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    getCatalog(id) {
      const loading = ElLoading.service({fullscreen: true})
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      get(catalogs + id, data).then(res => {
        const catalogs = this.catalogs
        this.catalogs = catalogs.concat(res.data.content)
        this.first = res.data.first
        this.isLast = res.data.last
        this.last = res.data.content[res.data.content.length - 1]
        this.pageNum = this.pageNum + 1
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    loadMore() {
      this.getCatalog(this.id)
    },
    toAddShelf() {

      const status = this.$store.state.user.status
      if (status) {
        const loading = ElLoading.service({fullscreen: true})
        post(addShelf + this.id).then(res => {
          this.addShelf = true
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        ElMessage({
          message: '请先登录，完成后可使用',
          type: 'warning',
        })
      }
    },
    toContent(id, catalog) {
      this.$router.push("/content/" + id + "/" + this.id + "/" + this.info.bookName + "/" + catalog)
    },
  }
}
</script>

<style scoped>
.el-col {
  padding-top: 2px;
  padding-bottom: 10px;
}

.grid-content {
  padding: 5px 2px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  display: flex;
  min-height: 100px;
}

.b_title {
  display: flex;
  flex: 2;
  flex-direction: column;
  padding-left: 10px;
}

.b_desc {
  display: inline;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 14px;
  padding-right: 20px;
}

.el-tag {
  padding-right: 10px;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-divider {
  margin: 2px;
}
</style>
